<template>
  <div class="flex direction-column height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="考核周期">
          <dictionary-picker dic-code="ZHOU_QI_LEI_XING" v-model="period"></dictionary-picker>
        </el-form-item>
        <el-form-item label="考核年度">
          <el-date-picker
            type="year" v-model="year"
            format="yyyy" value-format="yyyy"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="clickSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex justify-between margin-bottom">
      <div class="content-block border-radius bg-white">
        <div class="info-head">能源消费增量</div>
        <div class="info-content flex justify-center">
          <div class="info-item">
            <p class="item-label">五年总目标</p>
            <p class="item-number" :style="{color: themeColor}">1,223</p>
            <p class="item-text">万吨标准煤</p>
          </div>
          <div class="info-item">
            <p class="item-label">当前目标值</p>
            <p class="item-number" :style="{color: themeColor}">1,223</p>
            <p class="item-text">万吨标准煤</p>
          </div>
        </div>
      </div>
      <div class="content-block border-radius bg-white">
        <div class="info-head">能源消费强度</div>
        <div class="info-content flex justify-center">
          <div class="info-item">
            <p class="item-label">五年总目标</p>
            <p class="item-number" :style="{color: themeColor}">23</p>
            <p class="item-text">百分比</p>
          </div>
          <div class="info-item">
            <p class="item-label">当前目标值</p>
            <p class="item-number" :style="{color: themeColor}">13</p>
            <p class="item-text">百分比</p>
          </div>
        </div>
      </div>
    </div>
    <el-table
      class="table" v-loading="loading" :data="lists"
      height="100%"
      :header-cell-style="{
        backgroundColor: themeColor,
        color: 'white',
        textAlign: 'center'
      }"
      :cell-style="{
        textAlign: 'center'
      }"
    >
      <div slot="empty" class="empty-lists">
        <svg-icon name="search"></svg-icon>
        <span class="empty-text">暂无数据</span>
      </div>
      <el-table-column v-for="column in columns" :key="column.label" v-bind="column">
        <template v-if="column.children">
          <el-table-column v-for="item in column.children" :key="item.label" v-bind="item"></el-table-column>
        </template>
      </el-table-column>
    </el-table>
<!--    <el-pagination-->
<!--      class="pagination" layout="total,prev,pager,next"-->
<!--      hide-on-single-page background-->
<!--      :current-page.sync="pagination.pageNumber" :page-size="pagination.pageSize"-->
<!--      :total="pagination.total"-->
<!--    ></el-pagination>-->
  </div>
</template>

<script>
import DictionaryPicker from '@/components/dictionary-picker'
export default {
  name: 'energy-efficiency-analysis-two-control-warning',
  components: { DictionaryPicker },
  data () {
    return {
      period: '',
      year: new Date().getFullYear().toString(),
      lists: [],
      loading: false,
      pagination: {
        pageNumber: 1,
        pageSize: 10,
        total: 20
      },
      columns: [
        {
          label: '区域',
          prop: 'col1'
        },
        {
          label: '综合能源消费量（万吨标准煤）',
          children: [
            {
              label: '去年累计（万吨标准煤）',
              prop: 'col2'
            },
            {
              label: '本年累计（万吨标准煤）',
              prop: 'col3'
            },
            {
              label: '目标值（万吨标准煤）',
              prop: 'col4'
            }
          ]
        },
        {
          label: '能源消费增量（万吨标准煤）',
          prop: 'col5'
        },
        {
          label: '目标进度',
          prop: 'col6'
        },
        {
          label: '报警',
          prop: 'col7'
        }
      ]
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    }
  },
  mounted () {
    this.query()
  },
  methods: {
    query () {
      this.loading = true
      // TODO
      const rand = () => Math.round(Math.random() * 99 + 1)
      const districts = this.$store.getters['user/districts']
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          let id = 1
          this.lists = districts.map((v, i) => ({
            id: id++,
            col1: v.name,
            col2: rand(),
            col3: rand(),
            col4: rand(),
            col5: rand(),
            col6: rand(),
            col7: rand(),
          }))
          this.loading = false
        }, 400)
      })
    },
    clickSearch () {
      this.$nextTick(() => {
        this.query()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .content-block {
    padding: $gutter;
    width: 50%;
    & + & {
      margin-left: $gutter;
    }
  }
  .info-head {
    font-size: 16px;
  }
  .info-item {
    width: 30%;
  }
  .item-number {
    font-size: 22px;
  }
  .item-text {
    color: gray;
    font-size: 12px;
  }
</style>
